<template>
  <div>
    <van-tabs v-model="activeName">
      <van-tab title="团课" name="1">
        <h1 class="kong">&nbsp;</h1>
        <!--团课首页--预约场馆 -->
        <van-cell title="预约场馆" icon="map-marked">
          <van-dropdown-menu active-color="#6b8dcb" icon="../assets/posation.svg" title="预约场馆">
            <van-dropdown-item v-model="value1" :options="option1" />
          </van-dropdown-menu>
        </van-cell>
        <!-- 预约时间 -->
          <!--<van-cell icon="clock" title="团课预约时间" :value="date" @click="show = true" />-->
          <!--<van-calendar v-model="show" @confirm="onConfirm" />-->
        <!-- 可预约课程 -->
        <div class="tab_1">
          <span><van-icon name="smile" />可预约课程</span>
        </div>
        <!-- 测试传参 -->
        <router-link v-for="item in classList" :key="item.class_id" :to="{ path: `/Group_class_details/${item.class_id}` }">
          <div class="tab">
            <div class="tab-left">
              <img :src="item.class_img" alt="" style="width: 60px; height: 60px" />
              <span>4/4</span>
            </div>
            <!-- 右侧：课程信息+按钮 -->
            <div class="tab-right">
              <!-- 右侧-左侧课程信息 -->
              <div class="tab-right-list">
                <span class="tname">{{ item.class_name }}</span>
                <span class="ttn">19:00 - 19:45&nbsp;&nbsp;{{ item.class_coatch }}</span>
                <span class="ttime">预约满两人开课</span>
                <div class="ctarget">
                  <span>{{ item.class_tag }}</span>
                  <span>综合身体，核心</span>
                  <span>急速增肌，塑形</span>
                  <span>心肺考验</span>
                </div>
              </div>
              <!-- 右侧-右侧按钮 -->
              <div class="tab-right-button">
                <span class="bao">爆</span>
                <span class="no">{{ item.class_popnum }}人报名</span>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 加载 -->
        <!--<van-loading size="24px" vertical>加载中...</van-loading>-->
      </van-tab>
      <!-- 私教 -->
      <van-tab title="私教" name="2">
        <PrivateCourses :option1="option1" :classPrList="classPrList" />
      </van-tab>
    </van-tabs>
    <!-- 首页-Tabba底部导航栏 -->
    <Tabbar active="leisureclass" />
  </div>
</template>

<script>
import { Toast } from 'vant'
import Tabbar from '../components/Tabbar'
import PrivateCourses from '../components/PrivateCourses'
import { getClass, getPrClass, getVenue } from '../http/api'
export default {
  name: 'leisureclass',
  components: { PrivateCourses, Tabbar },
  props: ['activeN'],
  data() {
    return {
      activeName: '1',
      date: '',
      show: false,
      /* 预约场馆 */
      value1: 0,
      option1: [],
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      count: 0,
      /* 传参测试 */
      zid: 1,
      isLoading: false,
      currentDate: new Date(),
      classList: null,
      classPrList: null
    }
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm(date) {
      this.show = false
      this.date = this.formatDate(date)
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    },
    showPopup() {
      this.show = true
    },
    onClickRight() {
      this.$router.push('/information')
    },
    getVenues() {
      getVenue().then((res) => {
        for (let key in res.data.data) {
          this.option1.push({
            text: res.data.data[key].venue_name,
            value: res.data.data[key].venue_id
          })
        }
      })
    },
    getClass() {
      getClass().then((res) => {
        this.classList = res.data.data
      })
    },
    getPrClass() {
      getPrClass().then((res) => {
        this.classPrList = res.data.data
      })
    }
  },
  mounted() {
    this.$store.state.title = '课程预约'
    this.getVenues()
    this.getClass()
    this.getPrClass()
    // this.value1 =Number(this.$route.params.active)
    let active = this.$route.params.active
    if (active == 'undefined') {
      this.activeName = '1'
    } else {
      this.activeName = this.$route.params.active
      // console.log(this.activeName)
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
/* 分割线 */
.kong {
  background-color: #eee;
  border: 2px solid #eee;
  line-height: 6px;
  margin-bottom: 1px;
  margin-top: 12px;
}
.van-tabs__line {
  background-color: blue;
}
/* 新-  预约场馆 */
.van-dropdown-menu__bar > .van-dropdown-menu__item > .van-dropdown-menu__title {
  /* border: 1px solid red; */
  margin-right: 2%;
}
.van-dropdown-menu__bar > .van-dropdown-menu__item > .van-dropdown-menu__title > .van-ellipsis {
  /* color: gray; */
  font-weight: bold;
}
/* 预约时间 */
.van-cell > .van-icon {
  margin-left: 1rem;
}
.van-cell__title {
  font-size: 16px;
  font-weight: bold;
}
/* 预约课程 */
.courses {
  margin: 3% 15%;
  font-size: 12px;
  font-weight: bold;
}
/* 团课预约课程 */
.tab {
  position: relative;
  margin: 3px auto;
  padding: 10px 10px 5px;
  display: flex;
  /* align-items: center; */
  border-bottom: 1px solid rgb(240, 240, 240);
}
/* 可预约课程--标题 */
.tab_1 > span {
  font-size: 16px;
  margin-left: 16px;
  font-weight: bold;
}
/* 可预约课程--图片列 */
.tab > .tab-left {
  position: relative;
  left: 3%;
  /* padding: 0px 3px 0px 0px; */
  display: flex;
  flex-direction: column;
}
.tab > .tab-left > img {
  border-radius: 10px;
  margin-bottom: 5%;
}
.tab > .tab-left > span {
  color: #888;
  width: 100%;
  text-align: center;
}
/* 可预约课程--课程列 */
.tab > .tab-right > .tab-right-list {
  display: flex;
  position: relative;
  left: 3%;
  flex-direction: column;
  font-size: 12px;
  color: #888;
  margin-left: 20px;
}
.tab > .tab-right > .tab-right-list > .tname {
  color: black;
  font-weight: bold;
  font-size: 14px;
}
.tab > .tab-right > .tab-right-list > .ctarget {
  display: flex;
  flex-wrap: wrap;
}
.tab > .tab-right > .tab-right-list > .ctarget > span {
  display: inline-block;
  border: 1px solid #eee;
  padding: 2px 7px;
  margin-right: 6%;
  margin-bottom: 3%;
  border-radius: 10px;
  margin-top: 4%;
}
.tab-right {
  display: flex;
  justify-content: space-between;
}
.tab > .tab-right > .tab-right-button {
  position: absolute;
  width: 70px;
  left: 75%;
  margin: 8px auto;
  display: inline-block;
  text-align: center;
}
.tab > .tab-right > .tab-right-button > span {
  padding: 3px 7px;
  display: inline-block;
  text-align: right;
  margin-bottom: 5%;
  color: white;
  font-size: 12px;
  border-radius: 4px;
}
.tab > .tab-right > .tab-right-button > .bao {
  background-color: #f00;
}
.tab > .tab-right > .tab-right-button > .no {
  color: #888;
}
</style>
